﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>之渔拓客-智慧办公</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
    <style>
        /* 基础样式优化 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            background: #000d4a;
            color: #fff;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            overflow: hidden;
        }

        /* 头部样式优化 */
        .head {
            height: 1.05rem;
            background: url(images/head_bg.png) no-repeat center center;
            background-size: 100% 100%;
            position: relative;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.3rem;
        }

        .head h1 {
            font-size: 0.4rem;
            color: #fff;
            text-align: center;
            line-height: 1.05rem;
            flex: 1;
        }

        .weather {
            font-size: 0.18rem;
            color: #fff;
            text-align: right;
        }

        /* 主容器样式 */
        .dashboard-container {
            height: calc(100vh - 1.05rem);
            padding: 0.2rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 0.2rem;
        }

        /* 面板通用样式 */
        .panel {
            background: rgba(0,0,0,.4);
            border-radius: 0.1rem;
            border: 1px solid rgba(25,186,139,.3);
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 0.2rem;
        }

        /* 面板装饰 */
        .panel::before,
        .panel::after,
        .panel .corner-lt,
        .panel .corner-rt,
        .panel .corner-lb,
        .panel .corner-rb {
            content: '';
            position: absolute;
            width: 0.1rem;
            height: 0.1rem;
            border: 2px solid #02a6b5;
            position: absolute;
        }

        /* 左上角 */
        .panel::before {
            top: 0;
            left: 0;
            border-right: none;
            border-bottom: none;
        }

        /* 右上角 */
        .panel::after {
            top: 0;
            right: 0;
            border-left: none;
            border-bottom: none;
        }

        /* 左下角 */
        .panel .corner-lb {
            bottom: 0;
            left: 0;
            border-right: none;
            border-top: none;
        }

        /* 右下角 */
        .panel .corner-rb {
            bottom: 0;
            right: 0;
            border-left: none;
            border-top: none;
        }

        /* 数据总览面板 */
        .overview-panel {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            padding: 0.4rem;
        }

        .overview-item {
            text-align: center;
            padding: 0.2rem;
            width: 45%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .overview-value {
            font-size: 1.4rem;
            color: #ffff00;
            font-family: electronicFont;
            font-weight: bold;
            text-shadow: 0 0 15px rgba(255,255,0,.5);
            margin-bottom: 0.2rem;
        }

        .overview-label {
            font-size: 0.32rem;
            color: #ffffff;
            text-shadow: 0 0 10px rgba(255,255,255,.5);
        }

        /* 数字面板样式 */
        .number-panel {
            display: flex;
            flex-direction: column;
            padding: 0.2rem;
        }

        .panel-title {
            font-size: 0.32rem;
            color: #ffffff;
            text-align: center;
            margin-bottom: 0.3rem;
        }

        .number-grid {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
        }

        .person-item {
            text-align: center;
            margin: 0.2rem;
            min-width: 45%;
        }

        .person-value {
            font-size: 1.4rem;
            color: #ffff00;
            font-family: electronicFont;
            font-weight: bold;
            text-shadow: 0 0 15px rgba(255,255,0,.5);
            margin-bottom: 0.2rem;
        }

        .person-name {
            font-size: 0.32rem;
            color: #ffffff;
            text-shadow: 0 0 10px rgba(255,255,255,.5);
        }

        /* 响应式布局优化 */
        @media screen and (max-width: 1200px) {
            .dashboard-container {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(4, 1fr);
            }
        }

        @media screen and (max-width: 768px) {
            .head h1 {
                font-size: 0.3rem;
            }

            .overview-panel {
                flex-direction: column;
                padding: 0.2rem;
            }

            .overview-item {
                width: 100%;
                padding: 0.1rem;
            }

            .overview-value {
                font-size: 0.8rem;
            }

            .overview-label {
                font-size: 0.2rem;
            }

            .chart-title {
                font-size: 0.32rem;
            }
        }
    </style>
</head>
<body>
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <h1>之渔拓客-智慧办公 <span id="currentYearMonth"
                                style="font-size: 0.5em; margin-left: 15px; color: #ffeb7b;"></span></h1>
    <div class="weather"><span id="showTime"></span></div>
</div>

<div class="dashboard-container">
    <!-- 数据总览面板 -->
    <div class="panel overview-panel">
        <div class="overview-item">
            <div class="overview-value counter">240</div>
            <div class="overview-label">总有效触达</div>
        </div>
        <div class="overview-item">
            <div class="overview-value counter">420</div>
            <div class="overview-label">总有效线索</div>
        </div>
        <div class="corner-lb"></div>
        <div class="corner-rb"></div>
    </div>

    <!-- 有效线索面板 -->
    <div class="panel number-panel">
        <div class="panel-title">有效线索</div>
        <div class="number-grid" id="leads-grid">
            <!-- 动态插入线索人员数据 -->
        </div>
        <div class="corner-lb"></div>
        <div class="corner-rb"></div>
    </div>

    <!-- 有效触达面板 -->
    <div class="panel number-panel">
        <div class="panel-title">有效触达</div>
        <div class="number-grid" id="reach-grid">
            <!-- 动态插入触达人员数据 -->
        </div>
        <div class="corner-lb"></div>
        <div class="corner-rb"></div>
    </div>

    <!-- 有效转化率面板 -->
    <div class="panel number-panel">
        <div class="panel-title">有效转化率</div>
        <div class="number-grid" id="conversion-grid">
            <!-- 动态插入转化率数据 -->
        </div>
        <div class="corner-lb"></div>
        <div class="corner-rb"></div>
    </div>
</div>

<div class="back"></div>

<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    $(window).load(function () {
        var t = null;
        t = setTimeout(time, 1000);
        function time() {
            clearTimeout(t);
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            document.getElementById("currentYearMonth").innerHTML = y + "年" + mt + "月";
            t = setTimeout(time, 1000);
        }
    })

    $(document).ready(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})

        var chart4, chart5, chart6;

        $(window).resize(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 20})

            if (chart4) chart4.resize();
            if (chart5) chart5.resize();
            if (chart6) chart6.resize();
        });

        // 加载并处理数据
        function loadData() {
            fetch('js/data.json')
                .then(response => response.json())
                .then(data => {
                    const processedData = processData(data);
                    initCharts(processedData);
                    updateCounters(processedData);
                })
                .catch(error => console.error('Error loading data:', error));
        }

        // 数据处理函数
        function processData(data) {
            // 获取所有人员姓名
            const leadsNames = [...new Set(data.leads.map(item => item.name))];
            const reachNames = [...new Set(data.reach.map(item => item.name))];

            // 计算每个人的总和
            const leadsTotal = {};
            leadsNames.forEach(name => {
                leadsTotal[name] = data.leads
                    .filter(item => item.name === name)
                    .reduce((sum, item) => sum + item.value, 0);
            });

            const reachTotal = {};
            reachNames.forEach(name => {
                const leadsName = data.reach.find(item => item.name === name).leadsName;
                reachTotal[name] = {
                    value: data.reach
                        .filter(item => item.name === name)
                        .reduce((sum, item) => sum + item.value, 0),
                    leadsName: leadsName
                };
            });

            // 计算每组的转化率
            const conversionRates = reachNames.map(reachName => {
                const leadsName = reachTotal[reachName].leadsName;
                const rate = ((reachTotal[reachName].value / leadsTotal[leadsName]) * 100).toFixed(1);
                return {
                    name: `${leadsName}-${reachName}`,
                    rate: parseFloat(rate)
                };
            });

            // 更新显示值
            updateGrids(leadsTotal, reachTotal, conversionRates);

            return {
                leadsTotal,
                reachTotal,
                conversionRates,
                totalLeads: Object.values(leadsTotal).reduce((a, b) => a + b, 0),
                totalReach: Object.values(reachTotal).reduce((a, b) => a + b.value, 0)
            };
        }

        // 更新网格显示
        function updateGrids(leadsTotal, reachTotal, conversionRates) {
            // 更新线索数据
            const leadsHtml = Object.entries(leadsTotal).map(([name, value]) => `
                <div class="person-item">
                    <div class="person-value">${value}</div>
                    <div class="person-name">${name}</div>
                </div>
            `).join('');
            $('#leads-grid').html(leadsHtml);

            // 更新触达数据
            const reachHtml = Object.entries(reachTotal).map(([name, data]) => `
                <div class="person-item">
                    <div class="person-value">${data.value}</div>
                    <div class="person-name">${name}</div>
                </div>
            `).join('');
            $('#reach-grid').html(reachHtml);

            // 更新转化率数据
            const conversionHtml = conversionRates.map(item => `
                <div class="person-item">
                    <div class="person-value">${item.rate}%</div>
                    <div class="person-name">${item.name}</div>
                </div>
            `).join('');
            $('#conversion-grid').html(conversionHtml);

            // 添加数字动画效果
            $('.person-value').each(function() {
                const $this = $(this);
                const num = parseFloat($this.text());
                $this.prop('Counter', 0).animate({
                    Counter: num
                }, {
                    duration: 2000,
                    easing: 'swing',
                    step: function(now) {
                        if ($this.text().includes('%')) {
                            $this.text(now.toFixed(1) + '%');
                        } else {
                            $this.text(Math.ceil(now));
                        }
                    }
                });
            });
        }

        // 初始化图表
        function initCharts(data) {
            const chartConfig = {
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: { 
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLabel: { 
                        color: '#ffffff',
                        fontSize: 16,
                        fontWeight: 'bold'
                    },
                    axisLine: {
                        lineStyle: { color: 'rgba(255,255,255,0.3)' }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: { 
                        color: '#ffffff',
                        fontSize: 16,
                        fontWeight: 'bold'
                    },
                    splitLine: {
                        lineStyle: { color: 'rgba(255,255,255,0.2)' }
                    }
                }
            };

            // 初始化有效线索图表
            chart4 = echarts.init(document.getElementById('echart4'));
            chart4.setOption({
                ...chartConfig,
                xAxis: {
                    ...chartConfig.xAxis,
                    data: data.leadsNames
                },
                series: [{
                    type: 'bar',
                    data: data.leadsNames.map(name => ({
                        name: name,
                        value: data.leadsTotal[name],
                        itemStyle: { 
                            color: '#00ffff',
                            shadowBlur: 10,
                            shadowColor: 'rgba(0,255,255,0.5)'
                        }
                    })),
                    barWidth: '40%',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#ffffff',
                        fontSize: 48
                    }
                }]
            });

            // 初始化有效触达图表
            chart5 = echarts.init(document.getElementById('echart5'));
            chart5.setOption({
                ...chartConfig,
                xAxis: {
                    ...chartConfig.xAxis,
                    data: data.reachNames
                },
                series: [{
                    type: 'bar',
                    data: data.reachNames.map(name => ({
                        name: name,
                        value: data.reachTotal[name].value,
                        itemStyle: { 
                            color: '#00ff00',
                            shadowBlur: 10,
                            shadowColor: 'rgba(0,255,0,0.5)'
                        }
                    })),
                    barWidth: '40%',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#ffffff',
                        fontSize: 48
                    }
                }]
            });

            // 初始化转化率图表
            chart6 = echarts.init(document.getElementById('echart6'));
            chart6.setOption({
                ...chartConfig,
                xAxis: {
                    ...chartConfig.xAxis,
                    data: data.conversionRates.map(item => item.name)
                },
                yAxis: {
                    ...chartConfig.yAxis,
                    axisLabel: {
                        ...chartConfig.yAxis.axisLabel,
                        formatter: '{value}%'
                    }
                },
                series: [{
                    type: 'bar',
                    data: data.conversionRates.map(item => ({
                        name: item.name,
                        value: item.rate,
                        itemStyle: { 
                            color: '#ffff00',
                            shadowBlur: 10,
                            shadowColor: 'rgba(255,255,0,0.5)'
                        }
                    })),
                    barWidth: '40%',
                    label: {
                        show: true,
                        position: 'top',
                        color: '#ffffff',
                        fontSize: 48,
                        formatter: '{c}%'
                    }
                }]
            });
        }

        // 加载数据
        loadData();
    });
</script>
</body>
</html>
